function box2_table(x) {

  var data_table = x;//目的配合用户删除单词更新一下表格
  var table = document.getElementById("wordTable");
  var numRows = Math.ceil(data_table.length); // 计算需要的行数
  var pageSize = 10; // 每页显示的行数
  var currentPage = 1; // 当前页码
  function generateTable(page) {
    // 清空表格内容
    var tbody = table.getElementsByTagName("tbody")[0];
    tbody.innerHTML = "";
    var startIndex = (page - 1) * pageSize; // 计算起始索引
    var endIndex = Math.min(startIndex + pageSize, data_table.length);// 计算结束索引
    for (var i = startIndex; i < endIndex; i++) {
      var dataIndex = i;
      if (dataIndex < data_table.length) {
        var row = tbody.insertRow();
        var cellIndex = row.insertCell();
        var cellWord = row.insertCell();
        var cellValue = row.insertCell();
        // 设置表格行的宽度
        cellIndex.style.height = "35px";
        cellIndex.textContent = dataIndex + 1;
        cellIndex.style.textAlign = "center"; // 设置居中对齐
        cellWord.textContent = data_table[dataIndex].name;
        cellWord.style.textAlign = "center"; // 设置居中对齐
        cellValue.textContent = data_table[dataIndex].value;
        cellValue.style.textAlign = "center"; // 设置居中对齐
        dataIndex++;
      }
    }
  }
  function updatePagination() {
    var totalPages = Math.ceil(data_table.length / (pageSize * 2)); // 计算总页数
    console.log(totalPages);
    var paginationContainer = document.getElementById("pagination");
    // 清空页码选择框内容
    paginationContainer.innerHTML = "";
    // 创建分页容器 background-color: #3053a4;margin-top: 2px;
    var paginationList = document.createElement("ul");
    paginationList.classList.add("pagination");
    paginationList.classList.add("pagination-horizontal"); // 添加水平排列样式类
    paginationList.style.height = "30px"
    var previousNext = document.createElement("ul");
    previousNext.classList.add("pagination");
    previousNext.classList.add("pagination-horizontal"); // 添加水平排列样式类
    // 添加上一页按钮
    var previousButton = document.createElement("li");
    previousButton.classList.add("page-item");
    var previousLink = document.createElement("a");
    previousLink.classList.add("page-link");
    previousButton.style.backgroundColor = "#3053a4";
    previousButton.style.marginRight = "10px";
    previousButton.style.width = "90px";
    previousButton.style.height = "30px";
    previousButton.style.borderRadius = "5px";
    previousLink.innerHTML = "<<上一页";
    previousLink.addEventListener("click", function () {
      if (currentPage > 1) {
        currentPage--;
        generateTable(currentPage);
        updatePagination();
      }
    });
    previousButton.appendChild(previousLink);
    previousNext.appendChild(previousButton);
    // 计算起始页和结束页
    var startPage, endPage;
    if (totalPages <= 3) {
      startPage = 1;
      endPage = totalPages;
    } else if (currentPage <= 2) {
      startPage = 1;
      endPage = 3;
    } else if (currentPage >= totalPages - 1) {
      startPage = totalPages - 2;
      endPage = totalPages;
    } else {
      startPage = currentPage - 1;
      endPage = currentPage + 1;
    }
    // 添加页码选择框选项
    for (var i = startPage; i <= endPage; i++) { // 修改循环条件，包括结束页
      var pageButton = document.createElement("li");
      pageButton.classList.add("page-item");
      var pageLink = document.createElement("a");
      pageLink.classList.add("page-link");
      // pageButton.style.border = "1px solid blue";
      pageButton.style.backgroundColor = "#3053a4";
      pageButton.style.marginRight = "10px";
      pageButton.style.marginBottom = "10px";
      pageButton.style.width = "60px";
      pageButton.style.height = "20px";
      pageButton.style.borderRadius = "5px";
      pageButton.style.textAlign = "center";
      pageLink.textContent = i;
      if (i === currentPage) {
        pageButton.classList.add("active");
      }
      pageLink.addEventListener("click", function () {
        currentPage = parseInt(this.textContent);
        generateTable(currentPage);
        updatePagination();
      });
      pageButton.appendChild(pageLink);
      paginationList.appendChild(pageButton);
    }
    // 添加下一页按钮
    var nextButton = document.createElement("li");
    nextButton.classList.add("page-item");
    // nextButton.style.border = "1px solid blue"
    nextButton.style.backgroundColor = "#3053a4";
    nextButton.style.width = "90px";
    nextButton.style.height = "30px";
    nextButton.style.borderRadius = "5px";
    var nextLink = document.createElement("a");
    nextLink.classList.add("page-link");
    nextLink.innerHTML = "下一页>>";
    nextLink.addEventListener("click", function () {
      if (currentPage < totalPages) {
        currentPage++;
        generateTable(currentPage);
        updatePagination();
      }
    });
    nextButton.appendChild(nextLink);
    // paginationList.appendChild(previousButton);
    previousNext.appendChild(nextButton);

    // 将分页容器添加到页码选择框容器中
    paginationContainer.appendChild(paginationList);
    paginationContainer.appendChild(previousNext);
  }
  // 初始生成第一页表格和页码选择框
  generateTable(currentPage);
  updatePagination();

}

function download(wordcloudData_final) {
  var downloadButton = document.getElementById("download-button-table")
  downloadButton.addEventListener('click', () => {
    downloadCSVFile();
  });
  function downloadCSVFile() {
    var csv = '';
    var keys = Object.keys(wordcloudData_final[0]);

    // 添加CSV表头
    csv += keys.join(',') + '\n';

    // 添加每一行的数据
    wordcloudData_final.forEach(function (item) {
      var row = keys.map(function (key) {
        return item[key];
      });
      csv += row.join(',') + '\n';
    });

    var blob = new Blob([csv], { type: 'text/csv' });
    var url = URL.createObjectURL(blob);

    var link = document.createElement('a');
    link.href = url;
    link.download = 'wordfreq.csv';
    link.click();
  }

}
function test() {          //key为关键词
  fetch('/data_wordcloud')
    .then(response => response.json())
    .then(result => {
      wordcloudData_final = result;
      box2_table(wordcloudData_final)
      download(wordcloudData_final)
      // var clear_button = document.getElementById('dropdown-container');
      // clear_button.innerHTML = '';
      // box2_wordcloud();//绘制词云
    })
    .catch(error => {
      console.error('Error:', error);
    });
}
test();